var FixedProcessSetting = function () {
  var template = /* html */ `
    <div class="fixed-process-setting" v-loading.fullscreen.lock="loading">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addApproval">新增</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :dept-list="deptList"></search-form>
        </div>
      </search-btn-view>
      <div class="process-setting-table-div">
        <el-table fit stripe border :data="approvalList" style="width: 100%" height="parent">
          <el-table-column label="审批类型" min-width="100px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('attendance.approvalSetting.type.'+scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="deptName" min-width="100px" align="center"></el-table-column>
          <el-table-column label="审批流程" min-width="200px" header-align="center">
            <template slot-scope="scope">
              <template v-for="(user,index) in scope.row.approvalUserList">
                <span :key="'user_'+user.id">{{user.name}}</span>
                <i v-if="index<scope.row.approvalUserList.length-1" :key="'arrow_'+user.id" class="el-icon-right"></i>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateApproval(scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="deleteApproval(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>

      <el-dialog :title="formType==='add'?'新增审批流程':'修改审批流程'" :visible.sync="openForm" width="600px" top="10vh" @closed="dialogClosed">
        <div style="height:calc(80vh - 54px);overflow:auto">
          <fixed-approval-form v-if="openForm" :approval="selectApproval" :type="formType" :dept-list="deptList" :dropdown-option="dropdownOption"
            @save-success="saveSuccess">
          </fixed-approval-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    mixins: [
      tablePaginationMixin(15)
    ],

    data: function () {
      var search = {
        type: '',
        deptId: ''
      };
      return {
        loading: false,
        approvalList: [],
        deptList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        openForm: false,
        formType: '',
        selectApproval: null,
        dropdownOption: {},
        i18n: i18n
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setDeptList(),
        this.setApprovalList(true, false)
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setDeptList: function () {
        var self = this;
        return ajaxRequest('dingTalk/queryDept', {}, false).then(function (res) {
          var deptList = res.returnData;
          deptList = _.map(deptList, function (dept) {
            return {
              id: dept.id,
              name: dept.deptName
            };
          });
          self.deptList = deptList;
          return deptList;
        });
      },

      setApprovalList: function (isSearch, hasLoading) {
        if (hasLoading === undefined) {
          hasLoading = true;
        }

        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        var type = search.type;
        if (type === '') {
          type = '1,2,3';
        }
        postData.type = type;

        var deptId = search.deptId;
        if (deptId !== '') {
          postData.deptId = deptId;
        }

        if (hasLoading) {
          this.loading = true;
        }
        var self = this;
        return ajaxRequest('dingTalk/queryApprovalProcessSetForUnite', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var approvalList = res.returnData;
          if (approvalList === null) {
            approvalList = [];
          }

          for (var i = 0; i < approvalList.length; i++) {
            var approval = approvalList[i];
            var approverNameList = approval.approverName;
            approverNameList = approverNameList.split(',');
            var approverIds = approval.approverIds;
            approverIds = approverIds.split(',');
            var approvalUserList = [];
            for (var j = 0; j < approverIds.length; j++) {
              var approverId = approverIds[j];
              var approverName = approverNameList[j];
              approvalUserList.push({
                id: approverId,
                name: approverName
              });
            }
            approval.approvalUserList = approvalUserList;
          }

          self.approvalList = approvalList;
          self.pagination.totalCount = res.iTotalRecords;
          if (hasLoading) {
            self.loading = false;
          }
          return approvalList;
        }).catch(function () {
          if (hasLoading) {
            self.loading = false;
          }
          return [];
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setApprovalList(true);
      },

      pageChange: function () {
        this.setApprovalList();
      },

      addApproval: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateApproval: function (approval) {
        this.selectApproval = approval;
        this.formType = 'update';
        this.openForm = true;
      },

      deleteApproval: function (approval) {
        var self = this;
        this.$confirm('确定删除该审批流程设置？', '删除确认').then(function () {
          self.toDeleteApproval(approval);
        }).catch(function () {});
      },

      toDeleteApproval: function (approval) {
        this.loading = true;
        var self = this;
        ajaxRequest('dingTalk/insertApprovalProcessSetForUnite', {
          type: approval.type,
          deptId: approval.deptId
        }).then(function () {
          self.loading = false;
          self.$alert('成功删除该审核流程设置', '信息', {
            callback: function () {
              self.setApprovalList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setApprovalList(false);
      },

      dialogClosed: function () {
        this.formType = '';
        this.selectApproval = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      FixedApprovalForm: FixedApprovalForm
    },

    template: template
  };
}();
